import React, { useState, useEffect, useRef } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import axios from 'axios';
import { Modal, message } from 'antd';
import { Tabs } from 'react-vant'
import './css/phone.model.css';

axios.defaults.baseURL = "http://127.0.0.1:3000/chen/";

const Login = () => {
    const navigate = useNavigate();
    const [isChecked, setIsChecked] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isCaptchaVerified, setIsCaptchaVerified] = useState(false);
    const [userlist, setUserlist] = useState({
        username: '',
        password: ''
    });

    const handleCheckboxChange = () => {
        setIsChecked(!isChecked);
    };

    const showModal = () => {
        setIsModalOpen(true);
    };

    // const handleOk = () => {
    //   if (isCaptchaVerified) {
    //     setIsModalOpen(false);
    //     message.success('验证成功');
    //   } else {
    //     message.error('请完成滑块验证');
    //   }
    // };

    const handleCancel = () => {
        setIsModalOpen(false);
        setIsCaptchaVerified(false);
        setSliderPosition(0);
        message.error('验证失败');
    };

    const handleLogin = async () => {
        if (userlist.username.length <= 0) {
            message.error('请输入账号');
            return false;
        }
        if (userlist.password.length <= 0) {
            message.error('密码不能为空');
            return false;
        }
        if (!isChecked) {
            message.error('请先勾选《用户隐私政策》');
            return false;
        }
        if (!isModalOpen) {
            showModal();
            return false;
        }
        // if (!isCaptchaVerified) {
        //   message.error('请完成滑块验证');
        //   return false;
        // }
        try {
            const { data: { code, data } } = await axios.post('login', {
                username: userlist.username,
                password: userlist.password
            });
            if (code === 200) {
                sessionStorage.setItem('username', data[0].username);
                sessionStorage.setItem('roleID', data[0].role);
                message.success('登录成功');
                // navigate('/zhu/navpage');
            } else if (code == 404) {
                message.error('用户不存在');
            } else if (code == 401) {
                message.error('账号密码错误')
            }
        } catch (error) {
            message.error('登录请求出错，请稍后重试');
        }
    };



    return (
        <div className='pwdlogin_box'>
            <div className="pwdlogin_from">
                <input
                    className='phonefrom_input'
                    value={userlist.username}
                    onChange={e => setUserlist({ ...userlist, username: e.target.value })}
                    type="text"
                    placeholder='请输入手机号'
                />
                <input
                    className='phonefrom_input1'
                    value={userlist.password}
                    onChange={e => setUserlist({ ...userlist, password: e.target.value })}
                    type="password"
                    placeholder='请输入验证码'
                />
                <button className='yzm_button'>获取验证码</button>
            </div>
            <div className="checkbox-container">
                <input
                    type="checkbox"
                    id="privacy_policy"
                    checked={isChecked}
                    onChange={handleCheckboxChange}
                    className="custom-checkbox"
                />
                <label htmlFor="privacy-policy">我已阅读并同意</label>
                <span onClick={() => { navigate('/chen/index2') }} >《用户隐私政策》</span>

            </div>
            <button className="phonelogin_button" onClick={handleLogin}>登录</button>
            <p className="phoneforgot_password">还没有账号？注册！</p>
        </div>
    );
};

export default Login;